﻿@model WebExtras.JQDataTables.Datatable

<p>
  Paging support can be added by slightly modifying our AJAX callback action/request handler
</p>
<div class="well ui-well">
  <h4>Creating table settings</h4>
  Table settings are created by instantiating the <i>WebExtras.JQDataTables.DatatableSettings</i> class 
  <pre><code>  
  DatatableSettings dtSettings = new DatatableSettings 
  (
    5,                                      <span class="comment">// specify the number of records per page</span>
    dtColumns,
    new AASort(0, ESort.Ascending),         <span class="comment">// specify one initial sort, multiple initial sorts, or leave null for no sort</span>
    <span class="highlight">"~/getpageddata"</span>,                      <span class="comment">// specify an AJAX source to retrieve data from</span>
    "paged records",                        <span class="comment">// specify a table footer suffix</span>
    "150px"                                 <span class="comment">// specify a maximum table height, once reached you will get scroll bars</span>
  );
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating a data handler</h4>
  We make use of the C# LinqToSQL feature in order to simulate the paging behavior. This is how your paging method will normally look:
  <pre><code>  
  public DatatableRecords GetPagedRecords(DatatableFilters filters)
  {
    <span class="comment">// Let's create the actual data to go into the table by adding 15 records</span>
    List&lt;string[]&gt; dtData = new List&lt;string[]&gt;();

    <span class="comment">// You can retrieve data from your repository here</span>
    for (int i = 0; i < 15; i++)
    {
      dtData.Add(new string[] { 
        string.Format("first column paged row {0}", i + 1), 
        string.Format("second column paged row {0}", i + 1) 
      });
    }

    DatatableRecords dtRecords = new DatatableRecords
    {
      sEcho = filters.sEcho,
      iTotalRecords = dtData.Length,                                        <span class="comment">// Total records in table</span>
      iTotalDisplayRecords = dtData.Length,                                 <span class="comment">// Total records to be displayed in the table</span>
      aaData = dtData<span class="highlight">.Skip(filters.iDisplayStart).Take(iDisplayLength)</span>      <span class="comment">// The paged data to be displayed</span>
    };

    return dtRecords;
  }
  </code></pre>
  The reason we use the DatatableFilters as a parameter will soon be apparent
</div>

<div class="well ui-well">
  <h4>Make the first page of the table</h4>
  We need to create the first page of the table in order to have the paging behavior kick in. This should be done when you display
  the table the first time.
  <pre><code>  
  DatatableRecords dtRecords = GetPagedRecords(new DatatableFilters { iDisplayStart = 0, iDisplayLength = 5 });
  Datatable dTable = new Datatable("paged-table", dtSettings, dtRecords);
  </code></pre>
</div>

<div class="well ui-well">
  <h4>A slightly modified AJAX callback handler</h4>
  We will now make use of the method that we have already created before to do our grunt work and get the data. The fact that
  we have used DatatableFilters as one of the parameters means that we can simply forward the filtering parameters we got 
  from the HTTP GET request from the client side.
  <pre><code>
  public JsonResult GetPagedData(DatatableFilters filters)
  {
    DatatableRecords dtRecords = GetPagedRecords(filters);

    return Json(dtRecords, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And our paging enabled output is</h4>
  <div class="output">
    @Html.Partial(MVC.Shared.Views._Datatable, Model)
  </div>
</div>

<div class="well ui-well">
  <h4>Some more thing you should know</h4>
  <p>
    WebExtras in conjunction with the core jQuery DataTables library provides 5 paging mechanism, 2 of which come from the native library and 3 more
    from plugins.
  </p>
  <p>Paging mechanism is controlled by the <strong>SetupPaging()</strong> method on the <strong>WebExtras.JQDataTables.DatatableSettings</strong> class.</p>
  <p>
    By default the <strong>Bootstrap</strong> paging mechanism will be selected by the library. Paging can be disabled by setting the pagination type
    as <strong>None</strong>.
  </p>
  <div class="output">
    <table class="table table-bordered rounded ui-table">
      <thead>
        <tr>
          <th style="width: 20%">Pagination type</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>None</td>
          <td>Disables paging</td>
        </tr>
        <tr>
          <td>Full Numbers</td>
          <td>Provides the forward, back, first and last button along with individual page buttons</td>
        </tr>
        <tr>
          <td>Two buttons</td>
          <td>Provides a more compact version of full numbers with only 2 buttons - previous and next</td>
        </tr>
        <tr>
          <td>Bootstrap</td>
          <td>This comes from a plug-in and provides the mark-up needed for using pagination styling of Bootstrap 2.x with 
          DataTables. Note that this plug-in uses the fnPagingInfo API plug-in method to obtain paging information.</td>
        </tr>
        <tr>
          <td>Bootstrap3</td>
          <td>This comes from a plug-in and provides the mark-up needed for using pagination styling of Bootstrap 3 with 
          DataTables.</td>
        </tr>
        <tr>
          <td>Four Button</td>
          <td>The built-in pagination functions provide either two buttons (forward / back) 
          or lots of buttons (forward, back, first, last and individual pages). This 
          plug-in meets the two in the middle providing navigation controls for forward, 
          back, first and last.
          </td>
        </tr>
        <tr>
          <td>Scrolling</td>
          <td>This modification of DataTables' standard two button pagination controls adds a 
          little animation effect to the paging action by redrawing the table multiple times 
          for each event, each draw progressing by one row until the required point in the 
          table is reached.
          </td>
        </tr>
        <tr>
          <td>Gumby</td>
          <td>This is the default <strong>Full Numbers</strong> paging scheme with Gumby styling
            and layout applied
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
